<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!--百度统计-->
    <script src="/blog/js/statistics.js"></script>
    <!--layUI的css-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        body{
            width: 100%!important;
            height: 100%!important;
            background-image: url("https://z3.ax1x.com/2021/08/28/hlyVER.jpg");
            background-size: 100% auto;
            background-repeat: repeat;
        }
    </style>
    <!--layUI的js-->
    <script src="/layui/layui.js"></script>

    <script>
        layui.use(['layer'], function () {
            layer.load(1);
        })
    </script>
</head>
<body>

<div class="layui-container" style="height: 100%">
    <div class="layui-form layui-form-pane">
        <!--隐藏域：保存搜索框中的值-->
        <input type="text" value="" name="hidden_phone" title="" hidden>
        <input type="text" value="" name="hidden_username" title="" hidden>
        <input type="text" value="" name="hidden_blog_number_min" title="" hidden>
        <input type="text" value="" name="hidden_blog_number_max" title="" hidden>

        <div class="layui-form-item"></div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">phone</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="search_phone" placeholder="%phone%" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="search_username" placeholder="%username%" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">博客数</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="search_blog_number_min" placeholder="#" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="search_blog_number_max" placeholder="#" autocomplete="off"
                           class="layui-input">
                </div>
            </div>


            <div class="layui-inline">
                <div class="layui-btn-group">
                    <button id="search_btn" type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <button id="add_btn" type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <button id="edit_btn" type="button" class="layui-btn layui-btn-sm layui-bg-blue">
                        <i class="layui-icon">&#xe642;</i>
                    </button>
                    <button id="delete_btn" type="button" class="layui-btn layui-btn-sm layui-bg-red">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </div>
            </div>

        </div>
    </div>

    <table style="margin-bottom: 5em;opacity: 0.7" class="layui-table" layui-skin="line" lay-even lay-size="lg">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th><input type="checkbox" name="check_all" title="">&nbsp;</th>
            <th>phone</th>
            <th>用户名</th>
            <th>角色</th>
            <th>地址</th>
            <th>性别</th>
            <th>邮箱</th>
            <th>博客数</th>
            <th>评论数</th>
        </tr>
        </thead>
        <tbody id="user_list">
        <!--<tr>
            <td><input type="checkbox" name="user_id" value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
                    class="layui-nav-img" src="https://picsum.photos/id/130/500/500" alt=""></td>
            <td>12345678900</td>
            <td>一场游戏</td>
            <td>root</td>
            <td>四川</td>
            <td>男</td>
            <td>123@qq.com</td>
            <td>12</td>
            <td>12</td>
        </tr>-->
        </tbody>
    </table>


</div>
<!--分页按钮-->
<div style="position:fixed;bottom: 5em;left:40%;text-align: center;z-index:1000">
    <div id="user_page" style="text-align: center"></div>
</div>
</body>
</html>

<!--个人信息的layer-->
<form id="add_edit_layer" class="layui-form layui-form-pane" hidden>
    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-cellphone"></i>phone</label>
        <div class="layui-input-block">
            <input type="text" disabled name="phone" required lay-verify="phone" placeholder="phone"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-username"></i>用户名</label>
        <div class="layui-input-block">
            <input type="text" disabled name="username" required lay-verify="required" placeholder="username"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-password"></i>密码</label>
        <div class="layui-input-block">
            <input type="text" disabled name="password" required lay-verify="required" placeholder="password"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" pane>
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block" id="role_div">
            <!--<input type="radio" name="role_id" value="3" title="personal">-->
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-location"></i>地址</label>
        <div class="layui-input-block">
            <input type="text" disabled name="address" required lay-verify="required" placeholder="address"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" pane>
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-male"></i>
            性别
            <i class="layui-icon layui-icon-female"></i>
        </label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-email"></i>邮箱</label>
        <div class="layui-input-block">
            <input type="text" disabled name="email" required lay-verify="email" placeholder="email"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-email"></i>头像url</label>
        <div class="layui-input-block">
            <input type="text" disabled name="head_portrait_url" required lay-verify="url" placeholder="url"
                   autocomplete="off"
                   class="layui-input" value="https://picsum.photos/id/140/500/500">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">发布博客</label>
        <div class="layui-input-block">
            <input type="text" disabled name="blog_number" autocomplete="off" class="layui-input" value="10">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">发布评论</label>
        <div class="layui-input-block">
            <input type="text" disabled name="comment_number" autocomplete="off" class="layui-input" value="100">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block" style="text-align: right">
            <button class="layui-btn" lay-submit lay-filter="form_submit">更新</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="reset_btn">重置</button>
        </div>
    </div>
</form>
<!--jQuery-->
<script src="/jquery-3.6.0.min.js"></script>

<!--引入自己的js-->
<script src="/settings/js/user.js"></script>